<template>
  <div class="page-container">
    <div class="control-container">
      <div class="left-panel shrink-panel" :class="isWide?'':'narrow'">
        <div class="shrink-btn-panel">
          <i :class="isWide?'el-icon-arrow-left':'el-icon-arrow-right'" @click="isWide = !isWide" />
        </div>
        <OutletTree
          v-if="isWide"
          @handleNodeClick="handleNodeClick"
        />
      </div>
      <div class="right-panel">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="排口名称：">
              <el-select v-model="query.id" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in outletNames"
                  :key="'selectName'+'_'+item.id"
                  :label="item.outletName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="排放类型">
              <el-select v-model="query.outletType" placeholder="请选择">
                <el-option
                  v-for="item in outletTypes"
                  :key="item.value"
                  :value="item.code"
                  :label="item.codeName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="排放状态">
              <el-select v-model="query.outletStatus" placeholder="请选择">
                <el-option
                  v-for="item in outletStatuss"
                  :key="item.code"
                  :value="item.code"
                  :label="item.codeName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="MN">
              <el-select v-model="query.id" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in outletNames"
                  :key="'selectName'+'_'+item.id"
                  :label="item.outletMn"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="发布人">
              <el-select v-model="query.publisherId" filterable clearable :filter-method="dataFilter2" placeholder="请选择">
                <el-option
                  v-for="item in publisherIds"
                  :key="item.id"
                  :label="item.realName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="责任人">
              <el-select v-model="query.responsibilityId" filterable clearable :filter-method="dataFilter1" placeholder="请选择">
                <el-option
                  v-for="item in responsibilityIds"
                  :key="item.id"
                  :label="item.realName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="handleSelect">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <div style="float: right;">
              <el-button type="primary" :disabled="resetState" @click="handleBatch">批量修改人员</el-button>
              <el-button type="primary" @click="handleExport">导出</el-button>
              <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>
          </el-form>
        </div>
        <div class="table-panel">
          <el-table
            ref="table"
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 340px)"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column prop="enterpriseName" label="所属企业" />
            <el-table-column prop="outletName" label="排放口名称" />
            <el-table-column prop="outletMn" label="MN" />
            <el-table-column prop="outletType" label="排放口类型">
              <template slot-scope="scope">
                {{ getDictLabel('e012', scope.row.outletType) }}
              </template>
            </el-table-column>
            <el-table-column prop="outletStatus" label="排放状态">
              <template slot-scope="scope">
                {{ getDictLabel('e027', scope.row.outletStatus) }}
              </template>
            </el-table-column>
            <el-table-column prop="dischargeMode" label="排放方式">
              <template slot-scope="scope">
                {{ getDictLabel('e026', scope.row.dischargeMode) }}
              </template>
            </el-table-column>
            <el-table-column label="停运/启运">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.outletStatus1"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="e027_01"
                  inactive-value="e027_02"
                  @change="handleUpdateStatus(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="430">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handlesee(scope.row)">详情</el-button>
                <el-button v-if=" hasBth('outlet:edit')" type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="primary" size="mini" @click="handleStop(scope.row)">停产</el-button>
                <el-button type="primary" size="mini" @click="handleLog(scope.row)">日志</el-button>
                <el-button type="primary" size="mini" @click="handleDel(scope.row)">删除</el-button>
                <el-button type="primary" size="small" @click="config(scope.row)">配置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
    </div>
    <AddDialog
      :dialog-visible="dialogVisible"
      :dialog-type="dialogType"
      :obj="obj"
      :personnel="optionsCopy"
      @closeDialog="closeDialog"
      @flushPage="flushPage"
    />
    <BatchDialog
      :dialog-visible="batchDialogVisible"
      :batch="batch"
      @closeDialog="closeDialog"
      @flushPage="flushPage"
    />
    <StopDialog
      :dialog-visible="stopDialogVisible"
      :obj="obj"
      @closeDialog="closeDialog"
      @flushPage="flushPage"
    />
    <LogDialog
      :dialog-visible="logDialogVisible"
      :obj="obj"
      @closeDialog="closeDialog"
      @flushPage="flushPage"
    />
    <Config
      :dialog-visible="configureDialogVisible"
      :obj="obj"
      @closeDialog="closeDialog"
      @flushPage="flushPage"
    />
  </div>
</template>

<script>
import OutletTree from '@/components/Tree/outletTree'
import { getDict } from '@/utils/dict'
import { getDictLabel } from '@/utils'
import { getProjectPersonnel } from '@/utils/common'
import Pagination from '@/components/Pagination'
import { getPage, edit, getList, del } from '@/api/base/outlet'
import AddDialog from './components/AddDialog'
import BatchDialog from './components/BatchDialog'
import StopDialog from './components/StopDialog'
import LogDialog from './components/logDialog'
import Config from './factorLibrary/index'
import { hasBtnPermission as hasBth } from '@/utils/buttons'

export default {
  name: 'OutletPage',
  components: {
    Pagination, AddDialog, OutletTree, BatchDialog, StopDialog, LogDialog, Config
  },
  data() {
    return {
      isWide: true,
      query: {
        total: 0,
        page: 1,
        limit: 10,
        outletType: '',
        outletStatus: '',
        outletMn: '',
        responsibilityId: null,
        publisherId: null,
        id: null,
        projectDepartmentId: null
      },
      tableData: [],
      outletTypes: [],
      outletStatuss: [],
      responsibilityIds: [],
      publisherIds: [],
      optionsCopy: [],
      tableLoading: false,
      dialogVisible: false,
      batchDialogVisible: false,
      stopDialogVisible: false,
      logDialogVisible: false,
      configureDialogVisible: false,
      dialogType: 'detail',
      obj: {},
      batch: [],
      resetState: true,
      outletNames: []
    }
  },
  created() {
    this.getPersonnel()
    this.outletTypes = getDict('e012')
    this.outletStatuss = getDict('e027')
    this.initData()
  },
  methods: {
    getDictLabel, hasBth,
    initData() {
      this.handleSelect()
    },
    handleNodeClick(data) {
      this.handleReset()
      if (data.level === 1) {
        this.query.projectDepartmentId = data.id
      } else if (data.level === 2) {
        this.query.enterpriseId = data.id
      } else if (data.level === 3) {
        this.query.id = data.id
      }
      this.handleSelect()
    },
    // 根据排口树的点击返回排口id数组
    // recursion(data) {
    //   if (data) {
    //     if (data.children && data.children.length > 0) {
    //       data.children.forEach(element => {
    //         this.recursion(element)
    //       })
    //     } else {
    //       this.arrAddress.push(data.areaid)
    //     }
    //   }
    // },
    getPersonnel() {
      getProjectPersonnel().then((rows) => {
        this.responsibilityIds = rows.data.row
        this.publisherIds = rows.data.row
        this.optionsCopy = rows.data.row
      })
    },
    // 重置条件
    handleReset() {
      this.query = {
        total: 0,
        page: 1,
        limit: 10,
        outletType: '',
        outletStatus: '',
        outletMn: '',
        responsibilityId: null,
        publisherId: null,
        id: null,
        projectDepartmentId: null
      }
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      getPage(query).then(res => {
        const rows = res.data.rows
        rows.forEach(item => {
          if (item.outletStatus === 'e027_02') {
            item.outletStatus1 = 'e027_02'
          } else {
            item.outletStatus1 = 'e027_01'
          }
        })
        this.tableData = rows
        this.query.total = res.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
      getList().then(res => {
        this.outletNames = res.data.data
      }).catch(() => {
      })
    },
    // 刷新
    flushPage() {
      this.handleSelect()
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.resetState = false
      } else {
        this.resetState = true
      }
    },
    // 批量更新人员
    handleBatch() {
      this.batchDialogVisible = true
      const rows = this.$refs.table.selection
      const ids = []
      rows.forEach(item => {
        ids.push({ id: item.id, publisherId: null, responsibilityId: null })
      })
      this.batch = ids
    },
    // 导出
    handleExport() {},

    // 添加
    handleAdd() {
      this.obj = null
      this.dialogVisible = true
      this.dialogType = 'add'
    },
    // 修改
    handleUpdate(row) {
      this.obj = row
      this.dialogType = 'update'
      this.dialogVisible = true
    },
    // 删除
    handleDel(row) {
      this.id = row.id
      this.$confirm('确认删除此数据?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(row.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.handleSelect()
          this.flushPage()
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 查看
    handlesee(row) {
      this.obj = row
      this.dialogType = 'detail'
      this.dialogVisible = true
    },
    // 停产
    handleStop(row) {
      this.obj = row
      this.stopDialogVisible = true
    },
    // 日志
    handleLog(row) {
      this.obj = row
      this.logDialogVisible = true
    },
    // 配置
    config(row) {
      this.obj = row
      this.configureDialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.batchDialogVisible = false
      this.stopDialogVisible = false
      this.logDialogVisible = false
      this.configureDialogVisible = false
    },
    // 修改排放状态
    handleUpdateStatus(val) {
      const params = {
        id: val.id,
        outletStatus: val.outletStatus1
      }
      val.outletStatus1 = val.outletStatus1 === 'e027_01' ? 'e027_02' : 'e027_01'
      const title = val.outletStatus1 === 'e027_01' ? '停用' : '启用'
      this.$confirm('确定要' + title + '该排口吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        edit(params).then(() => {
          this.$message.success('修改成功')
          this.initData()
        }).catch(() => {
          this.$message.error('修改失败')
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
      this.batchDialogVisible = false
    },
    dataFilter1(val) {
      this.id = val // 吞掉了第一次输入,赋值回给输入框
      if (val) { // val存在
        this.responsibilityIds = this.optionsCopy.filter((item) => {
          if (!!~item.username.indexOf(val) || !!~item.username.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          } else if (!!~item.realName.indexOf(val) || !!~item.realName.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          } else if (!!~item.namePym.indexOf(val) || !!~item.namePym.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.responsibilityIds = this.optionsCopy
      }
    },
    dataFilter2(val) {
      this.id = val // 吞掉了第一次输入,赋值回给输入框
      if (val) { // val存在
        this.publisherIds = this.optionsCopy.filter((item) => {
          if (!!~item.username.indexOf(val) || !!~item.username.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          } else if (!!~item.realName.indexOf(val) || !!~item.realName.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          } else if (!!~item.namePym.indexOf(val) || !!~item.namePym.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.publisherIds = this.optionsCopy
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
